<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>社区主页</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="shortcut icon " type="images/x-icon" href="/img/logo.png">
    <style type="text/css">
        @font-face {
            font-family: 'iconfont';  /* project id 2134298 */
            src: url('//at.alicdn.com/t/font_2134298_n699l004mzc.eot');
            src: url('//at.alicdn.com/t/font_2134298_n699l004mzc.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_2134298_n699l004mzc.woff2') format('woff2'),
            url('//at.alicdn.com/t/font_2134298_n699l004mzc.woff') format('woff'),
            url('//at.alicdn.com/t/font_2134298_n699l004mzc.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_2134298_n699l004mzc.svg#iconfont') format('svg');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>


<body style="overflow: hidden;width: 100%;overflow-y: auto">
<!--导航栏-->
<nav class="navbar navbar-light bg-light navbar-expand  navbar-expand-sm  navbar-expand-md navbar-expand-lg navbar-expand-xl mb-3">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand mx-5 text-primary" href="/index">Community</a>
    <!--    查询文章-->
    <form class="form-inline" action="/search" method="get">
        <!--        显示搜索过的内容-->
        <input class="form-control ml-3 mt-3" type="search" th:placeholder="${search}" aria-label="Search" name="search"
               autocomplete="off" th:if="${search} != null">
        <input class="form-control ml-3 mt-3" type="search" placeholder="搜索问题" aria-label="Search" name="search"
               autocomplete="off" th:if="${search} == null">
        <button class="btn btn-outline-primary mt-3" type="submit">搜索</button>
    </form>
    <div class="collapse navbar-collapse row ">
        <!--未登录展示的导航栏-->
        <div class="offset-9 offset-sm-9 offset-xl-9 " th:if="${avatar} == null">
            <ul class="navbar-nav ">
                <a class="nav-link mx-2  mt-2" href="/publish">发布</a>
                <a class="nav-item nav-link mr-2  mt-2" href="/login">登录</a>
                <a class="nav-item nav-link ml-2  mt-2" href="/register">注册</a>
            </ul>
        </div>
        <!--        登陆后展示的导航栏-->
        <div class="offset-9 offset-sm-9 offset-xl-9 " th:if="${avatar} != null">
            <ul class="navbar-nav ">
                <a class="nav-item nav-link mx-3" href="/person">
                    <img th:src="${avatar}" style="height: 45px;width: 45px" class="rounded-circle">
                </a>
                <a class="nav-link mx-2  mt-2" href="/publish">发布</a>
            </ul>
        </div>
    </div>
</nav>

<!--整体内容-->
<div class="row">
    <!--左侧内容-->
    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 offset-1">
        <!--        巨幕-->
        <div class="jumbotron jumbotron-fluid bg-info">
            <div class="container">
                <h1 class="display-4">欢迎来到社区</h1>
                <p class="lead">在这里可以分享任何事情，学习、生活、吐槽、交友、求助</p>
            </div>
        </div>

        <!--内容,整个内容都可以超链接-->
        <div class="media mb-1 shadow" th:each="question:${questionlist}">

            <div class="media-body col-8  col-sm-8 col-md-8 col-lg-8 col-xl-8 py-2 px-1">
                <a th:href="'/card/'+ ${question.questionId}" class="text-decoration-none"><h4
                        class=" text-dark font-weight-bold"
                        th:text="${question.title}"></h4></a>
                <div class="mt-2">
                    <img th:src="${question.avatar}" class="rounded-circle" style="height: 50px;width: 50px">
                    <span th:text="${question.nickName}" class="font-weight-bold ml-2"></span>
                </div>
                <!--        thymeleaf截取字符串-->
                <a th:href="'/card/'+ ${question.questionId}" class="text-decoration-none text-dark">
                    <div class="mt-3" th:id="${question.questionId}"
                         th:text="${#strings.abbreviate(question.summary,169)}">
                    </div>
                </a>
                <!--        渲染html文本-->
                <script th:inline="javascript" type="text/javascript">
                    var quesionId = [[${question.questionId}]];
                    var article = document.getElementById(quesionId).innerText;
                    document.getElementById(quesionId).innerHTML = article;
                </script>
            </div>

            <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-4" th:if="${question.questionCoverPic} != null">
                <a th:href="'/card/'+ ${question.questionId}">
                    <img th:src="${question.questionCoverPic}" class="img-fluid"
                         style="height: 120px;width: 150px">
                </a>
            </div>
        </div>

        <!--分页-->
        <hr class="my-4">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-end">
                <li class="page-item">
                    <a th:href="@{'/'+${pageinfo}+'/'+${currentpage - 1}(search=${search})}" th:if="${currentpage} > 1"
                       class="page-link">Previous</a>
                </li>
                <!--        注意th:text的拼接-->
                <li class="page-item" th:each="page:${pages}">
                    <a class="page-link" th:href="@{'/'+${pageinfo}+'/'+${page}(search=${search})}"
                       th:text="${page}"></a>
                </li>
                <li class="page-item">
                    <a th:href="@{'/'+${pageinfo}+'/'+${currentpage + 1}(search=${search})}" class="page-link">Next</a>
                </li>
            </ul>
        </nav>
    </div>

    <!--    右侧内容-->
    <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
        <!--        推荐轮播图内容-->
        <div id="carouselCaptions" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselCaptions" data-slide-to="1"></li>
                <li data-target="#carouselCaptions" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <!--                必须有一个active-->
                <div class="carousel-item active" th:if="${poster1}!=null">
                    <a th:href="'/card/'+${poster1.questionId}"><img th:src="${poster1.coverPic}" class="d-block w-100"
                                                                     style="height: 200px"></a>
                    <div class="carousel-caption d-none d-md-block">
                        <h5 th:text="${poster1.title}"></h5>
                    </div>
                </div>
                <div class="carousel-item " th:if="${poster2}!= null">
                    <a th:href="'/card/'+${poster2.questionId}"><img th:src="${poster2.coverPic}" class="d-block w-100"
                                                                     style="height: 200px"></a>
                    <div class="carousel-caption d-none d-md-block">
                        <h5 th:text="${poster2.title}"></h5>
                    </div>
                </div>
                <div class="carousel-item " th:if="${poster3}!=null">
                    <a th:href="'/card/'+${poster3.questionId}"><img th:src="${poster3.coverPic}" class="d-block w-100"
                                                                     style="height: 200px"></a>
                    <div class="carousel-caption d-none d-md-block">
                        <h5 th:text="${poster3.title}"></h5>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselCaptions" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselCaptions" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <!--        小模块1 本周红人榜-->
        <div class="card border-info mb-3  mt-4  w-100">
            <div class="card-header">红人榜</div>
            <div class="card-body text-info">
                <a th:each="leader:${leaderBoard}" th:href="'/person/'+${leader.userId}">
                    <h5 class="card-title text-warning font-weight-bold" th:text="${leader.nickName}">
                    </h5>
                </a>
            </div>
        </div>
        <!--        通知-->
        <div class="card border-info mb-3" style="max-width: 18rem;">
            <div class="card-header bg-transparent border-info text-center">通知中心</div>
            <div class="card-body text-success">
                <a href="/notification">
                    <p class="card-text text-center">
                        <i class="iconfont">&#xe64c;</i>&nbsp;
                        <span th:text="${unreadCount}"></span>
                    </p>
                </a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
</body>
</html>